<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>CSS넘침및배치</title>
	</head>
	<body>
		<h1>CSS넘침및배치</h1>
		<h2>내용 넘침 : overflow</h2>
		<p>요소의 박스내 내용을 제어하는 방식에 대한 것</p>
		<p>visible : 박스 밖 넘쳐나는 내용은 남겨둠</p>
		<p>hidden : 박스 밖 넘쳐나는 내용은 숨겨둠</p>
		<p>scroll : 박스 밖 넘쳐나는 내용은 잘리지만 스크롤바로 볼 수 있게 함</p>
		<p>auto : 박스 내 내용이 넘쳐나면 스크롤바로 볼 수 있게 함</p>
		<div style="width: 250px; height: 150px; border: 1px solid navy;
		overflow: hidden">
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
		</div>
		<div style="width: 250px; height: 150px; border: 1px solid navy;
		overflow: scroll;">
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
		</div>
		<div style="width: 250px; height: 150px; border: 1px solid navy;
		overflow: auto">
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
			<p>시간은 금이라구, 친구</p>
		</div>
	<hr />
	<h2>요소의 수평배치 : float</h2>
	<p>요소를 오른쪽/왼쪽에 배치할지를 결정</p>
	<p>주로 img 태그에 사용하지만 레이아웃 배치에도 유용하게 활용할 수 있음</p>
	<p>단, float 속성을 해제할 때는 clear 속성을 사용</p>
	<p>clear : left, right, both</p>
	<div>
		<img src="images/suji02.jpg" style="float: left"/>
		<p style="width: 500px; border: 1px solid navy;">올시즌 NC에서 가장 좋은 모습을 보였던 이재학의 연봉은 얼마가 될까. 이재학은 투수 고과 1위인 것은 물론, 신인왕이란 타이틀까지 챙겼다.
			구단 측에선 특정선수에게 편중된 협상을 하지 않겠다고 하고 있지만, 이재학은 '상징성'이 있다.
			일단 역대 신인왕의 다음 시즌 연봉을 살펴보자. 2006년 류현진은 신인 최초 트리플크라운(다승, 평균자책점, 탈삼진 1위)에 등극하며
			MVP와 신인왕을 휩쓸었다. 그해 류현진은 신인 연봉 2000만원에서 400%가 오른 1억원에 재계약했다.
			여전히 역대 최고 인상률 기록으로 남아있다.
			이후 신인왕들은 류현진 만한 임팩트는 아니었지만, 연봉은 확실히 올랐다.
			2007년 두산 임태훈은 2000만원에서 6000만원으로 200%가 올랐다.
			2008년부터는 중고 신인왕이었는데 그해 삼성 최형우가 5000만원에서 100% 오른 1억원에 사인했고,
			2009년 두산 이용찬의 연봉은 2400만원에서 5900만원으로 껑충 뛰었다.
			2010년 두산 양의지는 2400만원에서 200% 오른 7200만원에 도장을 찍었다.
			2011년 삼성 배영섭은 2600만원에서 7000만원으로, 지난해 넥센 서건창은 2400만원에서 7700만원으로 인상됐다.
			임태훈과 양의지, 서건창은 인상율이 200%를 넘었다.
			하지만 모두 그해 연봉이 적었다. 다른 신인왕 선수들에 비해 많은 5000만원의 연봉을 받은 최형우는 100% 인상으로 억대 연봉에 진입했다.
			이재학의 경우는 어떨까. 이재학은 지난 시즌 퓨처스리그(2군)의 활약을 바탕으로 연봉이 3000만원에서 5000만원으로 올랐다.
			비록 2군이지만, 다승과 평균자책점 타이틀을 휩쓴데다 NC는 1군에서 활약해주길 바라는 '기대치'에서 연봉 인상을 안겼다.
			최근 신인왕들 중 최형우의 사례만 봐도 최소 억대 연봉이 예상된다.</p>
	</div>
	<div style="clear: both">
		<img src="images/suji02.jpg" style="float: right"/>
			<span style="float: right; width: 1100px; border: 1px solid navy;">올시즌 NC에서 가장 좋은 모습을 보였던 이재학의 연봉은 얼마가 될까. 이재학은 투수 고과 1위인 것은 물론, 신인왕이란 타이틀까지 챙겼다.
			구단 측에선 특정선수에게 편중된 협상을 하지 않겠다고 하고 있지만, 이재학은 '상징성'이 있다.
			일단 역대 신인왕의 다음 시즌 연봉을 살펴보자. 2006년 류현진은 신인 최초 트리플크라운(다승, 평균자책점, 탈삼진 1위)에 등극하며
			MVP와 신인왕을 휩쓸었다. 그해 류현진은 신인 연봉 2000만원에서 400%가 오른 1억원에 재계약했다.
			여전히 역대 최고 인상률 기록으로 남아있다.
			이후 신인왕들은 류현진 만한 임팩트는 아니었지만, 연봉은 확실히 올랐다.
			2007년 두산 임태훈은 2000만원에서 6000만원으로 200%가 올랐다.
			2008년부터는 중고 신인왕이었는데 그해 삼성 최형우가 5000만원에서 100% 오른 1억원에 사인했고,
			2009년 두산 이용찬의 연봉은 2400만원에서 5900만원으로 껑충 뛰었다.
			2010년 두산 양의지는 2400만원에서 200% 오른 7200만원에 도장을 찍었다.
			2011년 삼성 배영섭은 2600만원에서 7000만원으로, 지난해 넥센 서건창은 2400만원에서 7700만원으로 인상됐다.
			임태훈과 양의지, 서건창은 인상율이 200%를 넘었다.
			하지만 모두 그해 연봉이 적었다. 다른 신인왕 선수들에 비해 많은 5000만원의 연봉을 받은 최형우는 100% 인상으로 억대 연봉에 진입했다.
			이재학의 경우는 어떨까. 이재학은 지난 시즌 퓨처스리그(2군)의 활약을 바탕으로 연봉이 3000만원에서 5000만원으로 올랐다.
			비록 2군이지만, 다승과 평균자책점 타이틀을 휩쓴데다 NC는 1군에서 활약해주길 바라는 '기대치'에서 연봉 인상을 안겼다.
			최근 신인왕들 중 최형우의 사례만 봐도 최소 억대 연봉이 예상된다.</span>
	</div>
	<div style="clear: both">
		<img src="images/suji02.jpg" style="float: left"/>
		<p style="float: right; width: 1100px; border: 1px solid navy;">올시즌 NC에서 가장 좋은 모습을 보였던 이재학의 연봉은 얼마가 될까. 이재학은 투수 고과 1위인 것은 물론, 신인왕이란 타이틀까지 챙겼다.
			구단 측에선 특정선수에게 편중된 협상을 하지 않겠다고 하고 있지만, 이재학은 '상징성'이 있다.
			일단 역대 신인왕의 다음 시즌 연봉을 살펴보자. 2006년 류현진은 신인 최초 트리플크라운(다승, 평균자책점, 탈삼진 1위)에 등극하며
			MVP와 신인왕을 휩쓸었다. 그해 류현진은 신인 연봉 2000만원에서 400%가 오른 1억원에 재계약했다.
			여전히 역대 최고 인상률 기록으로 남아있다.
			이후 신인왕들은 류현진 만한 임팩트는 아니었지만, 연봉은 확실히 올랐다.
			2007년 두산 임태훈은 2000만원에서 6000만원으로 200%가 올랐다.
			2008년부터는 중고 신인왕이었는데 그해 삼성 최형우가 5000만원에서 100% 오른 1억원에 사인했고,
			2009년 두산 이용찬의 연봉은 2400만원에서 5900만원으로 껑충 뛰었다.
			2010년 두산 양의지는 2400만원에서 200% 오른 7200만원에 도장을 찍었다.
			2011년 삼성 배영섭은 2600만원에서 7000만원으로, 지난해 넥센 서건창은 2400만원에서 7700만원으로 인상됐다.
			임태훈과 양의지, 서건창은 인상율이 200%를 넘었다.
			하지만 모두 그해 연봉이 적었다. 다른 신인왕 선수들에 비해 많은 5000만원의 연봉을 받은 최형우는 100% 인상으로 억대 연봉에 진입했다.
			이재학의 경우는 어떨까. 이재학은 지난 시즌 퓨처스리그(2군)의 활약을 바탕으로 연봉이 3000만원에서 5000만원으로 올랐다.
			비록 2군이지만, 다승과 평균자책점 타이틀을 휩쓴데다 NC는 1군에서 활약해주길 바라는 '기대치'에서 연봉 인상을 안겼다.
			최근 신인왕들 중 최형우의 사례만 봐도 최소 억대 연봉이 예상된다.</p>
	</div>
	</body>
</html>